<template>
  <div class="ss-file-content">
    <t-loading :loading="!init" class="w-full h-full relative" tip="初始化中">
      <splitpanes class="default-theme" @resize="handleResize">
        <pane :size="size">
          <rest-client-editor v-if="init" v-model="content" @save="handleSave" @run="handleRun" />
        </pane>
        <pane>
          <monaco-view :value="data" />
        </pane>
      </splitpanes>
    </t-loading>
  </div>
</template>
<script lang="ts" setup>
import { Pane, Splitpanes } from "splitpanes";
import { debounce } from "radash";
import { UseSeniorFileItemContent } from "@/hooks/query/SeniorFileItemContent";

const props = defineProps({
  content: {
    type: Object as PropType<UseSeniorFileItemContent>,
    required: true
  }
});
const { content, data, init, size } = props.content;

const handleSave = debounce({ delay: 150 }, () => props.content.save());
const handleResize = ({ prevPane }: any) => {
  size.value = prevPane.size;
  handleSave();
};
const handleRun = (index: number) => {
  props.content.run(index);
};
</script>
<style scoped lang="less">
.ss-file-content {
  height: 100%;
  width: 100%;
}
</style>
